<template>
  <div class="decorateFormLeft">
    <button v-for="btn in list" :key="btn.id" @click="chooseThis(btn)" :title="'添加'+btn.name">
      <img :src="btn.icon" alt="" />
      <span>{{ btn.name }}</span>
    </button>
  </div>
</template>
<script>
import dantuzu from "@/static/images/formIcon/dantuzu.svg";
import biaotilan_form from "@/static/images/formIcon/biaotilan_form.svg";
import fuwenben from "@/static/images/formIcon/fuwenben.svg";
import xialaxuanze from "@/static/images/formIcon/xialaxuanze.svg";
import radio from "@/static/images/formIcon/radio.svg";
import checked from "@/static/images/formIcon/checked.svg";
import city from "@/static/images/formIcon/city.svg";
import telephone from "@/static/images/formIcon/telephone.svg";
import username from "@/static/images/formIcon/username.svg";
import date from "@/static/images/formIcon/date.svg";
import daterange from "@/static/images/formIcon/daterange.svg";
import time from "@/static/images/formIcon/time.svg";
import timerange from "@/static/images/formIcon/timerange.svg";
import datetime from "@/static/images/formIcon/datetime.svg";
import datetimerange from "@/static/images/formIcon/datetimerange.svg";
import Bus from "@/utils/bus";
export default {
  name: "DecorateFormLeft",
  data() {
    return {
      headControl: {
        id: 0,
        name: "页面设置",
        active: "",
        controlName: "headComponent",
        icon: "",
        ename: "page",
        max: 10,
        title: "页面标题",
        pageName: "自定义表单页",
        pageBgColor: "#F5F5F5",
        pageBgImg: "",
      },
      list: [
        {
          id: 1,
          name: "图片",active: "",
          controlName: "imageComponent",
          icon: dantuzu,
          ename: "image",
          max: 10,
          title: "图片",
          desc: "",
          placeholder: "",
          required: true,
          list: [
            {
              id:1,
              name:"",
              url:"https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png"
            },{
              id:2,
              name:"",
              url: ""
            }
          ],
        },
        {
          id: 2,
          name: "单行文本",active: "",controlName: "inputComponent",
          icon: biaotilan_form,
          ename: "input",
          title: "单行文本",
          minlength: -1,
          maxlength: -1,
          desc: "",
          placeholder: "请输入",
          required: true,
          value: "",
        },
        {
          id: 3,
          name: "多行文本",active: "",controlName: "textareaComponent",
          icon: fuwenben,
          ename: "textarea",
          title: "多行文本",
          minlength: -1,
          maxlength: -1,
          desc: "",
          placeholder: "请输入",
          required: true,
          value: "",
        },

        {
          id: 4,
          name: "下拉选项",active: "",controlName: "selectComponent",
          icon: xialaxuanze,
          ename: "select",
          title: "下拉选项",
          desc: "",
          placeholder: "请选择",
          required: true,
          value: "",
          list: [
            { id: 1, name: "选项1", value: "选项1" },
            { id: 2, name: "选项2", value: "选项2" },
          ],
        },

        {
          id: 5,
          name: "单选",active: "",controlName: "radioComponent",
          icon: radio,
          ename: "radio",
          title: "单选",
          desc: "",
          required: true,
          value: "",
          list: [
            { id: 1, name: "选项1", value: "选项1" },
            { id: 2, name: "选项2", value: "选项2" },
          ],
        },

        {
          id: 6,
          name: "多选",active: "",controlName: "checkboxComponent",
          icon: checked,
          ename: "checkbox",
          title: "多选",
          desc: "",
          required: true,
          value: [""],
          list: [
            { id: 1, name: "选项1", value: "选项1" },
            { id: 2, name: "选项2", value: "选项2" },
          ],
        },

        {
          id: 7,
          name: "地区",active: "",controlName: "areaComponent",
          icon: city,
          ename: "area",
          title: "地区",
          desc: "",
          placeholder: "请选择地区",
          required: true,
          value: "",
          search: {
            title: "填写条件",
            value: 1,
            list: [
              { id: 1, name: "省份" },
              { id: 2, name: "省市" },
              { id: 3, name: "省市区" },
            ],
          },
        },

        {
          id: 8,
          name: "手机号",active: "",controlName: "phoneComponent",
          icon: telephone,
          ename: "phone",
          title: "手机号",
          maxlength: 11,
          desc: "",
          placeholder: "请填写11位手机号码",
          required: true,
        },

        {
          id: 9,
          name: "身份证号",active: "",controlName: "idCardComponent",
          icon: username,
          ename: "idCard",
          title: "身份证号",
          maxlength: 18,
          desc: "",
          placeholder: "请填写18位身份证号码",
          required: true,
        },

      /*  {
          id: 10,
          name: "日期",active: "",controlName: "dateComponent",
          icon: date,
          ename: "date",
          title: "日期",
          desc: "",
          placeholder: "选择日期",
          required: true,
          value: "",
          search: {
            title: "默认",
            value: 2,
            list: [
              { id: 1, name: "不默认" },
              { id: 2, name: "填表当天" },
              { id: 3, name: "指定日期" },
            ],
          },
        },

        {
          id: 11,
          name: "日期范围",active: "",controlName: "dateRangeComponent",
          icon: daterange,
          ename: "daterange",
          title: "日期范围",
          desc: "",
          required: true,
          value: ["", ""],
          daterange: {
            start: {
              placeholder: "请选择开始日期",
              title: "开始日期",
              default: {
                title: "默认",
                value: 2,
                list: [
                  { id: 1, name: "不默认" },
                  { id: 2, name: "填表当天" },
                  { id: 3, name: "指定日期" },
                ],
              },
            },
            end: {
              placeholder: "请选择结束日期",
              title: "结束日期",
              default: {
                title: "默认",
                value: 2,
                list: [
                  { id: 1, name: "不默认" },
                  { id: 2, name: "填表当天" },
                  { id: 3, name: "指定日期" },
                ],
              },
            },
          },
        },

        {
          id: 12,
          name: "时间",active: "",controlName: "timeComponent",
          icon: time,
          ename: "time",
          title: "时间",
          desc: "",
          placeholder: "选择时间",
          required: true,
          value: "",
          search: {
            title: "默认",
            value: 2,
            list: [
              { id: 1, name: "不默认" },
              { id: 2, name: "填表当天" },
              { id: 3, name: "指定时间" },
            ],
          },
        },

        {
          id: 13,
          name: "时间范围",active: "",controlName: "timeRangeComponent",
          icon: timerange,
          ename: "timerange",
          title: "时间范围",
          desc: "",
          required: true,
          value: ["", ""],
          timerange: {
            start: {
              placeholder: "请选择开始时间",
              title: "开始时间",
              default: {
                title: "默认",
                value: 2,
                list: [
                  { id: 1, name: "不默认" },
                  { id: 2, name: "填表当天" },
                  { id: 3, name: "指定时间" },
                ],
              },
            },
            end: {
              placeholder: "请选择结束时间",
              title: "结束时间",
              default: {
                title: "默认",
                value: 2,
                list: [
                  { id: 1, name: "不默认" },
                  { id: 2, name: "填表当天" },
                  { id: 3, name: "指定时间" },
                ],
              },
            },
          },
        },

        {
          id: 14,
          name: "日期时间",active: "",controlName: "dateTimeComponent",
          icon: datetime,
          ename: "datetime",
          title: "日期时间",
          desc: "",
          placeholder: "选择日期",
          required: true,
          value: "",
          search: {
            title: "默认",
            value: 2,
            list: [
              { id: 1, name: "不默认" },
              { id: 2, name: "填表当天时间" },
              { id: 3, name: "指定日期时间" },
            ],
          },
        },

        {
          id: 15,
          name: "日期时间范围",active: "",controlName: "dateTimeRangeComponent",
          icon: datetimerange,
          ename: "datetimerange",
          title: "日期时间范围",
          desc: "",
          required: true,
          value: ["", ""],
          datetimerange: {
            start: {
              placeholder: "请选择开始时间",
              title: "开始日期",
              default: {
                title: "默认",
                value: 2,
                list: [
                  { id: 1, name: "不默认" },
                  { id: 2, name: "填表当天日期" },
                  { id: 3, name: "指定日期时间" },
                ],
              },
            },
            end: {
              placeholder: "请选择结束时间",
              title: "结束日期",
              default: {
                title: "默认",
                value: 2,
                list: [
                  { id: 1, name: "不默认" },
                  { id: 2, name: "填表当天日期" },
                  { id: 3, name: "指定日期时间" },
                ],
              },
            },
          },
        },
*/




      ],
    };
  },
  created() {},
  props: ["controlData"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    //页面初始化
    init() {
      if(localStorage.getItem("setFormContent")) {
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        if(setFormContent && setFormContent.length>0 && setFormContent[0].ename!="page") {
          setFormContent.forEach(item => {
            item.active = ""
          })
          let row = JSON.parse(JSON.stringify(this.headControl));
          row.id = new Date().getTime();
          row.active = "on";
          this.$parent.headControl = row;
          setFormContent.unshift(row);
          localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
          Bus.$emit("updateMain");
          Bus.$emit("updateRight");
        }else {
          let setFormContent = [];
          let row = JSON.parse(JSON.stringify(this.headControl));
          row.id = new Date().getTime();
          row.active = "on";
          this.$parent.headControl = row;
          setFormContent.push(row);
          localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
          Bus.$emit("updateMain");
          Bus.$emit("updateRight");
        }
      }else{
        let setFormContent = [];
        let row = JSON.parse(JSON.stringify(this.headControl));
        row.id = new Date().getTime();
        row.active = "on";
        this.$parent.headControl = row;
        setFormContent.push(row);
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit("updateMain");
        Bus.$emit("updateRight");
      }
    },
    chooseThis(btn) {
      if(this.$parent.headControl.active=="on") {
        this.$parent.headControl.active=""
      }
      let row = JSON.parse(JSON.stringify(btn));
      row.id = new Date().getTime();
      if(localStorage.getItem("setFormContent")){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(item => {
          item.active = "";
        })
        row.active="on";
        setFormContent.push(row);
        localStorage.setItem("setFormContent",JSON.stringify(setFormContent));
        this.$parent.control = row;
      } else {
        row.active="on";
        localStorage.setItem("setFormContent",JSON.stringify([row]));
        this.$parent.control = row;
      }
      Bus.$emit("updateMain");
      Bus.$emit("updateRight");
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.decorateFormLeft {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 50px 0px 20px 20px;
  box-sizing: border-box;
  button {
    background-color: rgba(0, 0, 0, 0.04);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 3px;
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    margin-right: 20px;
    cursor: pointer;
    opacity: 0.8;
    &:hover{
      opacity: 1;
      background-color: rgba(0, 0, 0, 0.06);
    }
    img {
      width: 24px;
      height: 24px;
      display: block;
      margin-bottom: 5px;
    }
  }
}
</style>
